<!--头部-->
{include file="public/header"/}
    <div class="layui-body">
        <!--tab标签-->
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">轮播管理</li>
                <button class="layui-btn" id="tj">
                    <i class="layui-icon">&#xe608;</i> 添加
                </button>
            </ul>

            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table class="layui-table">
                        <thead>
                        <tr onclick="djs()">
                            <th style="width: 30px;text-align: center">ID</th>
                            <th style="width: 30px;" align="center">排序</th>
                            <th style="text-align: center">轮播图片</th>
                            <th style="text-align: center">跳转地址</th>
                            <th style="text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist id="val" name="carousel"}
                        <tr id="dels{$val.id}">
                            <td style="text-align: center">{$val.id}</td>
                            <td style="text-align: center">{$val.sort}</td>
                            <td style="text-align: center"><img style="width: 100px;height: 60px;" src="__ROOT__/uploads/{$val.image}"></td>
                            <td style="text-align: center">{$val.link}</td>
                            <td style="text-align: center">
                                <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-mini" onclick="bj({$val.id},{$val.sort},'{$val.link}')">编辑</a>
                                <a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-mini" onclick="del('{$val.id}')">删除</a>
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
    <!--底部-->
{include file="public/footer" /}
<!--添加轮播layer-->
<script>
   $('#tj').on('click',function(){
       layer.open({
           type: 1,
           area: ['600px', '360px'],
           shadeClose: false, //点击遮罩关闭
           content: '\<\div style="text-align:center;">请添加你要添加的轮播图片\<\/div>'+
                    '<center>'+
                    '<form method="post" action="{:url('Carousel/add')}" enctype="multipart/form-data"><br/><br/>'+
                    '<input type="file" id="files" name="image" style="display: none;">'+
                    '<div style="border: 1px solid grey;width: 250px;">排序:<input type="text" style="height: 30px;border-left:0px;border-top:0px;border-right:0px;border-bottom:1px;" name="sort"></div></br>'+
                    '<div style="border: 1px solid grey;width: 250px;">地址:<input type="text" style="height: 30px;border-left:0px;border-top:0px;border-right:0px;border-bottom:1px;" name="link"></div></br>'+
                    '<div class="layui-btn layui-btn-radius" style="margin-right: 55px;" id="images"><img src="__ROOT__/admin/images/images.png">上传图片</div>'+
                    '<input style="display:none " type="submit" id="submit">'+
                    '<div class="layui-btn layui-btn-radius layui-btn-normal" id="up"><img src="__ROOT__/admin/images/up.png">上传</div>'+
                    '</form>'+
                    '</center>'
       })
       $('#images').on('click',function(){
           $('#files').click();
       })
       $('#up').on('click',function(){
           $('#submit').click();
       })
   });
   <!--修改轮播layer-->
   function bj(id,sort,link){
       layer.open({
                   type: 1,
                   area: ['600px', '360px'],
                   shadeClose: false, //点击遮罩关闭
                   content: '\<\div style="text-align:center;">请编辑你要编辑的轮播图片\<\/div>'+
                   '<center>'+
                   '<form method="post" action="{:url('Carousel/update')}" enctype="multipart/form-data"><br/><br/>'+
                   '<input type="hidden" value="'+id+'" name="id">'+
                   '<input type="file" id="files1" value="" name="image" style="display: none;">'+
                   '<div style="border: 1px solid grey;width: 250px;">排序:<input type="text" style="height: 30px;border-left:0px;border-top:0px;border-right:0px;border-bottom:1px;" value="'+sort+'" name="sort"></div></br>'+
                   '<div style="border: 1px solid grey;width: 250px;">地址:<input type="text" style="height: 30px;border-left:0px;border-top:0px;border-right:0px;border-bottom:1px;" value="'+link+'" name="link"></div></br>'+
                   '<div class="layui-btn layui-btn-radius" style="margin-right: 55px;" id="images1"><img src="__ROOT__/admin/images/images.png">上传图片</div>'+
                   '<input style="display:none " type="submit" id="submit1">'+
                   '<div class="layui-btn layui-btn-radius layui-btn-normal" id="upde"><img src="__ROOT__/admin/images/update.png">修改</div>'+
                   '</form>'+
                   '</center>'
               })
               $('#images1').on('click',function(){
                   $('#files1').click();
               })
               $('#upde').on('click',function(){
                   $('#submit1').click();
               })
       }
   <!--删除轮播layer-->

   function del(id) {
       //ajax实现异步删除数据（逻辑删除，只是改变字段的状态）
       $.ajax({
           type: "POST",
           url: "{:url('Carousel/del')}",
           data: 'id='+id,
           dataType: "json",
           success: function (data) {
              // debugger;
              // alert(data+"##"+1);
               //window.location.reload(data);
               //layer弹出层
               var aa=layer.load(2,{shade:false});
               //一秒过后弹出层消失
	            setTimeout(function(){
			        layer.close(aa);
			        layer.msg('删除成功！！！')
                    //获取点击删除的节点
                    var child=document.getElementById("dels"+id);
                    //把获取到的节点删除掉
                    child.remove();
		        },1000);
           },error: function(err){
               alert("数据已逃跑，请刷新页面");
           }
       })

   }

</script>